<template>
	<!-- 球馆 statr -->
	<view class="meadowlands">
		<view class="bg1">
			<view></view>
		</view>
		<view class="left"></view>
		<uv-navbar :fixed="false" :placeholder="true" bg-color="transparent">
			<image slot="left"></image>
			<text slot="center" style="font-weight: bold;font-size: 32rpx;color: #FFFFFF;">球馆</text>
		</uv-navbar>
		<view class="header">
			<swiper class="swiper" circular :indicator-dots="false" @change="handleSwiperChange" :autoplay="autoplay"
				:interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in banner" class="banner" :key="index">
					<image :src="item" mode=""></image>
				</swiper-item>
			</swiper>
			<!-- 自定义指示点 -->
			<!-- <view class="custom-dots">
				<view v-for="i in 3" :key="i" :class="['dot', { active: currentIndex === i }]"></view>
			</view> -->
		</view>
		<view class="box">
			<view class="title1">推荐球馆</view>
			<view class="list">
				<scroll-view class="scroll-content" :scroll-y="true" @scrolltolower="getarenas">
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="content">
							<view class="img">
								<image :src="item.img" mode=""></image>
							</view>
							<view class="miscellaneous">
								<view class="name">{{item.name}}</view>
								<view class="time">营业时间: {{item.open_time}}-{{item.close_time}}</view>
								<view class="address_title">{{item.city}}{{item.county}}{{item.detail}}</view>
							</view>
						</view>
						<view class="address">
							<view class="km">{{item.distance}}</view>
							<view class="icon">
								<image src="https://www.guizhouqy.com/mini/address.png" mode=""
									@click="choosePlace(item)">
								</image>
								<image class="ml32" src="https://www.guizhouqy.com/mini/phone.png" mode=""
									@click="clickPhone(item.phone)"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- <tabbar :count="1"></tabbar> -->
	</view>
	<!-- 球馆 end -->
</template>

<script>
	import tabbar from '@/components/custom-tab-bar/index';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				currentIndex: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				list: [],
				banner: [],
				param: {
					page: 1,
					limit: 10,
					lat: 0, // 纬度
					lng: 0 // 经度
				}
			}
		},
		onLoad() {
			this.getLocation()
		},
		onShow() {
			// this.getarenas()
		},
		methods: {
			// 获取用户定位
			async getLocation() {
				await uni.getLocation({
					success: (res) => {
						this.param.lat = res.latitude
						this.param.lng = res.longitude
						this.getarenas()
					}
				})
			},
			//打开地图
			choosePlace(data) {
				const {
					latitude,
					longitude
				} = data

				uni.openLocation({
					latitude: parseFloat(latitude),
					longitude: parseFloat(longitude),
					success: function(res) {
						console.log(res)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			//拨打电话
			clickPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// 获取球馆列表
			async getarenas() {
				uni.showLoading({
					title: '请稍后'
				})

				let res = await this.$api.meadowlands.getarenas.get(this.param)

				uni.hideLoading()
				if (res.code == 0) {
					// this.$tool.success(res.msg);

					this.list = [
						...this.list,
						...res.data.list
					]

					this.banner = res.data.banner

					if (res.data.length == 0) {
						return
					}

					this.param.page += 1
				} else {
					this.$tool.error(res.msg);
				}
			},
			handleSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
		}
	}
</script>

<style lang="scss">
	page {
		overflow: hidden;
	}

	.meadowlands {
		background: #240F41;
		color: #FFFFFF;
		min-height: 100vh;

		.bg1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: calc(50%-59px);

			view {
				width: 118px;
				height: 118px;
				background: linear-gradient(90deg, #C829F3 0%, #4516CA 100%);
				box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 0.9;
				filter: blur(90px);
			}
		}

		.left {
			width: 118px;
			height: 118px;
			background: linear-gradient(90deg, #1F87EF 0%, #1F87EF 100%);
			box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 0.9;
			filter: blur(90px);
			position: absolute;
			left: 0;
			top: 20px;
		}

		.title {
			font-size: 16px;
			color: #FFFFFF;
			text-align: center;
			padding-top: 30px;
			font-weight: bold;
		}

		.header {
			margin-top: 24px;
			padding: 0 26rpx;
			position: relative;
		}
	}

	.banner {
		height: 144px !important;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.custom-dots {
		display: flex;
		justify-content: center;
		position: absolute;
		left: 50%;
		/* 水平居中 */
		bottom: 20px;
		/* 距离底部距离 */
		transform: translateX(-50%);
		/* 修正居中偏移 */
		z-index: 10;
		/* 确保在轮播图上层 */
	}

	.dot {
		width: 32rpx;
		height: 8rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		margin: 0 10rpx;
		background: #FFFFFF;
		transition: all 0.3s;
	}

	.dot.active {
		width: 32rpx;
		background: linear-gradient(90deg, #C829F3 0%, #4516CA 100%);
	}

	.box {
		height: 80vh;
		margin: 0 26rpx;

		.title1 {
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 45rpx;
		}

		.list {
			padding-bottom: 120rpx;
			height: calc(100% - 140rpx);

			.scroll-content {
				height: 100%;
			}

			.item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-top: 32rpx;
				border-bottom: 1rpx solid #C829F3;
				padding-bottom: 32rpx;

				.content {
					flex: 1;
					display: flex;
					align-items: center;

					image {
						width: 144rpx;
						height: 144rpx;
					}

					.miscellaneous {
						margin-left: 32rpx;

						.name {
							font-size: 28rpx;
							color: #FFFFFF;
						}

						.time {
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							background: linear-gradient(180deg, rgba(154, 36, 185, 0.5) 0%, rgba(133, 22, 233, 0.5) 100%);
							border-radius: 48rpx;
							border: 2rpx solid #9A24B9;
							font-size: 24rpx;
							color: #FFFFFF;
							text-align: center;
							margin-top: 26rpx;
							width: fit-content;
							padding: 5rpx 20rpx;
						}

						.address_title {
							font-size: 24rpx;
							// color: #FFFFFF;
							margin-top: 26rpx;
							white-space: nowrap;
							/* 强制文本不换行 */
							overflow: hidden;
							/* 隐藏超出部分 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
							max-width: 400rpx;
						}
					}
				}

				.address {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.km {
						font-size: 24rpx;
						color: #FFFFFF;
						text-align: right;
					}

					.icon {
						margin-top: 67rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 48rpx;
							height: 48rpx;
						}

						.ml32 {
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>